/***********************布局***********************/
.flex {
  display: flex;
}
.flex-wrap {
  display: flex;
  flex-wrap: wrap;
}
.flex-J-SB {
  display: flex;
  justify-content: space-between;
}
.flex-J-SA {
  display: flex;
  justify-content: space-around;
}
.flex-J-SE {
  display: flex;
  justify-content: space-evenly;
}
.flex-A-C {
  display: flex;
  align-items: center;
  align-content: center;
}
.flex-col {
  display: flex;
  flex-direction: column;
}
.flex-row {
  display: flex;
  flex-direction: row;
}
.flex-J-C {
  display: flex;
  justify-content: center;
  justify-items: center;
}
.flex-A-B {
  display: flex;
  align-items: baseline;
  align-content: baseline;
}
@for $i from 0 through 30 {
  .flex-#{$i} {
    flex: $i;
  }
}
.T-A-L {
  text-align: left;
}
.T-A-C {
  text-align: center;
}
.T-A-R {
  text-align: right;
}
/***********************间距***********************/
// 定义间距映射
$gaps: (
  xs: 12rem,
  sm: 22rem,
  md: 32rem,
  lg: 44rem,
  xl: 64rem,
  xxl: 88rem,
  auto: auto,
  0: 0,
);

// 循环生成样式
@each $key, $value in $gaps {
  .MT-#{$key} {
    margin-top: var(--gap-#{$key}) !important;
  }
  .ML-#{$key} {
    margin-left: var(--gap-#{$key}) !important;
  }
  .MR-#{$key} {
    margin-right: var(--gap-#{$key}) !important;
  }
  .MB-#{$key} {
    margin-bottom: var(--gap-#{$key}) !important;
  }
  .MG-#{$key} {
    margin: var(--gap-#{$key}) !important;
  }
  .PT-#{$key} {
    padding-top: var(--gap-#{$key}) !important;
  }
  .PL-#{$key} {
    padding-left: var(--gap-#{$key}) !important;
  }
  .PR-#{$key} {
    padding-right: var(--gap-#{$key}) !important;
  }
  .PB-#{$key} {
    padding-bottom: var(--gap-#{$key}) !important;
  }
  .PD-#{$key} {
    padding: var(--gap-#{$key}) !important;
  }
  .Prow-#{$key} {
    padding-left: var(--gap-#{$key}) !important;
    padding-right: var(--gap-#{$key}) !important;
  }
  .Pcol-#{$key} {
    padding-top: var(--gap-#{$key}) !important;
    padding-bottom: var(--gap-#{$key}) !important;
  }
  .Mrow-#{$key} {
    margin-left: var(--gap-#{$key}) !important;
    margin-right: var(--gap-#{$key}) !important;
  }
  .Mcol-#{$key} {
    margin-top: var(--gap-#{$key}) !important;
    margin-bottom: var(--gap-#{$key}) !important;
  }
  .gap-#{$key} {
    gap: var(--gap-#{$key}) !important;
  }
  .auto-MT-#{$key} {
    & > * + * {
      margin-top: var(--gap-#{$key});
    }
  }
  .auto-ML-#{$key} {
    & > * + * {
      margin-left: var(--gap-#{$key});
    }
  }
  .auto-MB-#{$key} {
    & > * + * {
      margin-bottom: var(--gap-#{$key});
    }
  }
  .auto-MR-#{$key} {
    & > * + * {
      margin-right: var(--gap-#{$key});
    }
  }
}
:root {
  @each $key, $value in $gaps {
    --gap-#{$key}: #{$value};
  }
}
